﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="message.css">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="flexiable.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="flexible.js"></script>
</head>
<body>
<div class="message-container">
    <!--头部-->
    <div class="message-header">
        <i class="fa fa-2x fa-angle-left "></i>
        <span class="msg">消息(99+)</span>
        <i class="fa fa-2x fa-trash-o"></i>
        <i class="fa fa-2x fa-user-o"></i>
        <i class="fa fa-2x fa-plus"></i>
    </div>
    <!--中间内容-->
    <div class="message-content">
        <!--ul-->
        <ul class="list-content">
            <li class="list-item item1">

                <div class="list-item__left"><i class="fa fa-2x fa-tags"></i></div>
                <div class=list-item__right>
                    <span class="title">优惠促销</span>
                    <span class="time">昨天</span>
                    <p>112减100神券持续抢，千款好物加磅，...</p>
                </div>

            </li>
            <li class="list-item">
                <div class="list-item__left left-two"><i class="fa fa-2x fa-tags"></i></div>
                <div class=list-item__right>
                    <span class="title">账户通知</span>
                    <span class="time">昨天</span>
                    <p>您有1张优惠券到账，优惠总额10元，今...</p>
                </div>
            </li>
            <li class="list-item">
                <div class="list-item__left left-three"><i class="fa fa-2x fa-bell"></i></div>
                <div class=list-item__right>
                    <span class="title">服务通知</span>
                    <span class="time">昨天</span>
                    <p>您购物车中的【三星（SAMAUNG）128...】</p>
                </div>
            </li>
            <li class="list-item">
                <div class="list-item__left left-four"><span class="top-line">店铺</span><span class="top-line1">头条</span></div>
                <div class=list-item__right>
                    <span class="title">店铺头条</span>
                    <span class="time">星期日</span>
                    <p>冲鸭~最后2小时下单再减20！！！</p>
                </div>
            </li>
            <li class="list-item item5">
                <div class="item">
                <div class="list-item__left left-five"><i class="fa fa-2x fa-bell"></i></div>
                <!--<div class="list-item__left left-five"><i class="fa fa-2x fa-bell"></i></div>
                <div class=list-item__right></div>-->
                <div class="list-item__l" data-index="{{index}}" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend' >
                    <span class="title">PLUS会员</span>
                    <span class="time">星期六</span>
                    <p>11.11要剁手？先【免费领】30天PLUS...</p>
                </div>
                <div class="list-item__r" ><span class="del" >删除</span></div>
                </div>
            </li>
            <li class="list-item">
                <div class="list-item__left left-six"><i class="fa fa-2x fa-file"></i></div>
                <div class="list-item__right">
                    <span class="title">京东白条</span>
                    <span class="time">2018/11/02</span>
                    <p>3期全品类免息券等你来拿！还可连领11...</p>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script>
    var del = document.getElementsByClassName('list-item__r')[0];
    var list = document.getElementsByClassName('list-item__l')[0];
    var leftFive = document.getElementsByClassName('left-five')[0];
    var item5 = document.getElementsByClassName('item5')[0];
        list.onclick = function(){
        leftFive.style.display = 'none';
        del.style.display = 'block';
        list.style.left = '0.44rem';
    };
    del.onclick = function(){
        item5.style.display = 'none';
    };

   /* ;(function (window, document, undefined) {
        function getEle(selector) {
            return document.querySelector(selector);
        }
        function bindEv(ele, type, eventHandler) {
            if (ele.addEventListener){
                ele.addEventListener(type, function (event) {
                    var e = event || window.event;
                    eventHandler(e);
                });
            } else if (ele.addEventListener){
                ele.attach('on' + type, function (event) {
                    var e = event || window.event;
                    eventHandler(e);
                });
            } else {
                ele['on' + type] = eventHandler;
            }
        }
        function detectIsSliderItem(_e, targetCls) {
            var targetEle = _e.target || _e.srcElement;
            return targetEle.parentNode.className === targetCls ? targetEle.parentNode : null;
        }
        function setStyle(ele, attrName, attrValue) {
            if(attrName === 'left') {
                ele.style.left = parseInt(attrValue) + 'px';
            }else {
                ele.style[attrName] = attrValue;
            }
        }
        function shrink(ele, terminal, transition) {
            setStyle(ele, 'left', terminal);
            setStyle(ele, 'transition', transition)
        }
        function slider(delegationName, eventTarget) {
            // 事件的委托对象
            var delegateParent = typeof delegationName === 'object' ? delegationName : getEle(delegationName);
            // 触发事件的目标对象的selector
            var _target = eventTarget;
            // 是否可滑动
            var slideFlag = false;
            // 鼠标初始位置
            var originPosX = 0;
            // 鼠标move时不断更新的位置
            var currentPosX = 0;
            // 鼠标移动前后x轴方向的距离
            var distance = 0;
            // 展开状态的列表项
            var openingSlider = null;
            function slideStart(event) {
                var e = event || window.event;
                var target = detectIsSliderItem(event, _target);
                if (target) {
                    if (openingSlider) {
                        if (openingSlider === this) {
                            // 收起 this/openingSlider
                            shrink(target, 0, 'all .2s ease-in-out');
                        } else {
                            // 收起 openingSlider
                            shrink(openingSlider, 0, 'all .2s ease-in-out');
                            // 展开 this
                            slideFlag = true;
                            originPosX = e.changedTouches[0].clientX;
                            currentPosX = e.changedTouches[0].clientX;
                        }
                    } else {
                        // 展开 this
                        slideFlag = true;
                        originPosX = e.changedTouches[0].clientX;
                        currentPosX = e.changedTouches[0].clientX;
                    }
                }
            }
            function slideMove(event) {
                var e = event || window.event;
                var target = detectIsSliderItem(event, _target);
                if (slideFlag) {
                    currentPosX = e.changedTouches[0].clientX;
                    distance = currentPosX - originPosX;
                    if(distance < 0){
                        if(distance <= -70){
                            target.style.left = ( -70 / distance ) * (distance + 70) -70 + 'px';
                        }else{
                            target.style.left = distance + 'px';
                        }
                    }
                }
            }
            function slideEnd() {
                var target = detectIsSliderItem(event, _target);
                if (distance > -35) {
                    shrink(target, 0, 'all .2s ease-in-out');
                } else {
                    shrink(target, -70, 'all .2s ease-in-out');
                    openingSlider = target;
                }
            }
            function tapSlide() {
                console.log(123);
            }
            bindEv(delegateParent, 'touchstart', slideStart);
            bindEv(delegateParent, 'touchmove', slideMove);
            bindEv(delegateParent, 'touchend', slideEnd);
            bindEv(delegateParent, 'tap', tapSlide);
        }
        window.slider = slider;
    })(window, document);
    slider('.list-content', 'list--item');
    touchstart:function(e){
        this.setData({
            index: e.currentTarget.dataset.index,
            Mstart: e.changedTouches[0].pageX
        });
    }*/

</script>
</html>